{% extends 'blogs/common/base.html' %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='prism/themes/prism-one-dark.css') }}">
    <script src="{{ url_for('static', filename='prism/prism.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='prism/plugins/line-numbers/prism-line-numbers.min.css') }}">
    <script src="{{ url_for('static', filename='prism/plugins/line-numbers/prism-line-numbers.min.js') }}"></script>
{% endblock %}

{% block content %}
    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            {# 中心区内容 #}
            <div class="layui-col-md9">
                <div class="post-card">
                    <div class="title">
                        <h1>{{ article.title }}</h1>
                    </div>

                    <div class="post-msg">
                        <span>
                            <i class="layui-icon">&#xe612;</i>
                            <span>你大爷的</span>
                        </span>
                        <span>
                            <i class="layui-icon">&#xe705;</i>
                            <a href="#">{{ article.category.name }}</a>
                        </span>
                        <span>
                            <i class="layui-icon">&#xe68d;</i>
                            <span>{{ article.add_time | strftime }}</span>
                        </span>
                        <span>
                            <i class="layui-icon">&#xe62c;</i>
                            <span>{{ article.read_count }}</span>
                        </span>
                        <span>
                            {% if article.tags %}
                                <i class="layui-icon">&#xe674;</i>
                                {% for tag in article.tags %}
                                    <a class="layui-btn layui-btn-xs layui-btn-primary" href="#"
                                       style="color: {{ tag.color }}; margin-left: 4px;margin-bottom: 2px">{{ tag.name }}</a>
                                {% endfor %}
                            {% endif %}
                        </span>
                    </div>

                    <div class="post-content">
                        {{ article.content_html | safe }}
                    </div>

                    <div class="post-tag">
                        <div>
                            {% if prev_article %}
                            <a href="{{ url_for('blogs.article', article_id=prev_article.id) }}">上一篇：{{ prev_article.title }}</a>
                            {% else %}
                                <span>上一篇：没有上一篇了~</span>
                            {% endif %}
                        </div>
                        <div>
                            {% if next_article %}
                            <a href="{{ url_for('blogs.article', article_id=next_article.id) }}">下一篇：{{ next_article.title }}</a>
                            {% else %}
                                <span>下一篇：没有下一篇了~</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% include 'blogs/module/comment_edit.html' %}
                {% include 'blogs/module/comment_list.html' %}
            </div>
            {# 右边侧边栏 #}
            <div class="layui-col-md3">
                {% include 'blogs/common/sidebar.html' %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        layui.jquery('pre').addClass("line-numbers").css("white-space", "pre-wrap");
        layui.use(function () {
            let util = layui.util;
            // 自定义固定条
            util.fixbar({
                bgcolor: '#b0bbc0',
            });
        });
    </script>
{% endblock %}